<template>
    <div class="flex flex-jc-sb">
        <div class="flex">
            <div class="detail-value flex gap-10 flex-wrap">
                <template v-for="(i, index) in searchData" :key="index">
                    <el-date-picker v-if="i.type === 'date'" v-model="i.value" :type="i.dateType" value-format="YYYY-MM-DD"
                        class="date-solt point" unlink-panels range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" :shortcuts="shortcuts" @change="choiceTimeSection(i)"
                        style="width:241px; margin-right:0" />

                    <input v-if="i.type === 'input'" type="text" :placeholder="i.placeholder" class="input search-input"
                        v-model="i.value" style="width:176px" @input="handleInput(i)" />
                </template>
            </div>
            <div class="search flex gap-10 mg-l-10">
                <button class="btn" @click="handleSearch">搜索</button>
                <button class="btn-white" @click="handleReset">
                    重置
                </button>
            </div>
        </div>
        <div>
            <button class="btn" @click="handleExportAll">导出勾选</button>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { shortcuts } from '@/utils/global'
import { cloneDeep } from 'lodash';

export default defineComponent({
    props: {
        searchList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            searchData: <any>[],
            shortcuts: shortcuts.slice(0, 3)
        }
    },
    watch: {
        searchList: {
            handler(newval) {
                this.searchData = cloneDeep(newval)
            },
            immediate: true,
            deep: true
        }
    },
    computed: {
    },
    methods: {
        choiceTimeSection(ev: any) {
            this.$emit('update:searchList', this.searchData)
        },
        handleInput(ev: any) {
            this.$emit('update:searchList', this.searchData)
        },
        handleSearch() {
            this.$emit('doSearch')
        },
        handleReset() {
            for (const key in this.searchData) {
                if (Array.isArray(this.searchData[key].value)) {
                    this.searchData[key].value = []
                } else {
                    this.searchData[key].value = ''
                }
            }
            this.$emit('update:searchList', this.searchData)
            this.$emit('doSearch')
        },
        handleExportAll() {
            console.log('export all');
            this.$emit('export')
        }
    }
})
</script>
<style lang="stylus" scoped>
.gap-10
    gap 10px
.mg-l-10
    margin-left 10px
.flex-wrap {
    flex-wrap wrap
}
</style>